import { FC, useEffect, useRef, useState } from "react";
import { Image } from "antd";
import { clone, find, get, map } from "lodash";
import RoilView from "../RoilView";
import Slider from "react-slick";

const contentStyle = {
  width: "400px",
  height: "400px",
  objectFit: "contain",
  margin: "0 auto",
};

const ImgCore: FC<{
  data: string[];
  activeItem: any;
  pointList?: { index: number; roi: [number, number][][] }[];
}> = ({ data, pointList = [], activeItem }) => {
  const [visible, setVisible] = useState(false);
  const [dataSource, setDataSource] = useState([]);
  const [curIdx, setCurIdx] = useState(0);
  const sliderRef = useRef();
  useEffect(() => {
    const index = get(activeItem, "image_hit_roi[0].index");
    if (typeof index === "number" && sliderRef.current) {
      sliderRef.current?.slickGoTo?.(index);
      setCurIdx(index);
    }
  }, [activeItem]);
  const settings = {
    customPaging: function (i) {
      const isActive = i === curIdx;
      return (
        <a
          className="inline-block"
          style={
            isActive
              ? {
                  border: "1px solid black",
                }
              : {}
          }
        >
          <Image
            src={get(data, `[${i}]`)}
            preview={isActive ? { visible: false } : false}
            onClick={() => {
              if (isActive) {
                setVisible(true);
              }
            }}
          />
        </a>
      );
    },
    dots: true,
    dotsClass: "slick-dots slick-thumb",
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };
  return (
    <div className="pb-[70px]">
      <Slider
        {...settings}
        ref={sliderRef}
        afterChange={(v) => {
          setCurIdx(v as number);
        }}
      >
        {map(data, (source, idx) => (
          <div className="relative">
            <div style={contentStyle}>
              <Image
                src={dataSource[idx] || source}
                preview={{ visible: false }}
                onClick={() => {
                  setVisible(true);
                }}
              />
            </div>
            {idx === curIdx && <RoilView
              width={400}
              height={400}
              roil={get(find(pointList, { index: idx }), "roi", [])}
              callbackSource={(source: any) => {
                setDataSource((dataSource) => {
                  const newDataSource = clone(dataSource);
                  newDataSource[idx] = source;
                  return newDataSource;
                });
              }}
              source={source}
            />}
          </div>
        ))}
      </Slider>
      <div style={{ display: "none" }}>
        <Image.PreviewGroup
          preview={{
            visible,
            onVisibleChange: (vis: boolean) => setVisible(vis),
            current: curIdx,
          }}
        >
          {map(data, (source, idx) => (
            <Image src={get(dataSource, idx, source)} />
          ))}
        </Image.PreviewGroup>
      </div>
    </div>
  );
};

export default ImgCore;
